<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-yellow sidebar-mini">

<!--文件列表模态框-->
<div class="modal fade" id="modal-import-record">
    <div class="modal-dialog" style="width: 1240px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">库存</h4>
            </div>
            <div class="modal-body">
                <form id="queryForm" class="form-horizontal" role="form">
                    <div class="row" id="toolbarExplain">
                        <div class="form-inline">
                            <div class="form-group">
                                <label for="query-prodNo">生产令号</label>
                                <input id="query-prodNo" type="text" name="prodNo" class="form-control"
                                       placeholder="请输入生产令号">
                            </div>
                            <div class="form-group">
                                <label for="query-proName">项目名称</label>
                                <input id="query-proName" type="text" name="proName" class="form-control"
                                       placeholder="请输入项目名称">
                            </div>
                            <div class="form-group">
                                <label for="query-special">类型</label>
                                <input id="query-special" type="text" name="special" class="form-control"
                                       placeholder="请输入类型">
                            </div>
                            <div class="form-group">
                                <label for="query-part">部分</label>
                                <input id="query-part" type="text" name="part" class="form-control"
                                       placeholder="请输入部分">
                            </div>
                            <button type="button" class="btn btn-success" id="btn-search"
                                    onclick="js.table.search(table)">
                                <span class="Bold">搜索</span>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="form-inline">
                    <button type="button" id="btn_explainAdd"
                            class="btn btn-info pull-right" onclick="selected()">
                        发货出库
                    </button>
                </div>
                <div class="row">
                    <table id="bootstrap-table-explain"></table>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<section class="content-header">
    <div class="form-inline" style="margin-top: 20px">
        <a id="btn_notRead" href="javascript:void(0);" shiro:hasPermission="conInstall:delivery:save"
           class="btn btn-info pull-right" style="margin-right: 10px" onclick="saveAll()">
            <span class="Bold">保存</span>
        </a>
        <a href="javascript:void(0);" class="btn btn-success pull-right" style="margin-right: 10px"
           onclick="openExplain()">
            <span class="Bold">发货出库</span>
        </a>
    </div>
    <h1></h1>
</section>
<section class="content">
    <div class="box-body" style="margin-top: 50px">
        <form id="sheetForm" class="form-horizontal bg-white">
            <div class="col-xs-11 col-xs-offset-1">
                <table class="t1 t3" id="hoursTable">
                    <thead>
                    <tr>
                        <td colspan="6">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -20px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td colspan="2" style="width: 9%;font-size: 20px;">出库单</td>
                        <td colspan="1" style="width: 9%"></td>
                    </tr>
                    <tr>
                        <td style="width: 8%">创建人</td>
                        <td colspan="2" style="width: 15%;font-size: 14px;">
                            <input id="projectLeader" class="form-control" name="createName" th:value="${createName}"
                                   readonly>
                        </td>
                        <td style="width: 8%">创建时间</td>
                        <td colspan="2" style="width: 12%">
                            <input id="designLeader" type="text" class="form-control" name="createTime"
                                   th:value="${#dates.format(createTime, 'yyyy-MM-dd')}" readonly>
                        </td>
                        <td style="width: 10%">部门</td>
                        <td colspan="1" style="width: 12%">
                            <input id="prodNo" type="text" class="form-control" name="dept" th:value="${dept}" readonly>
                        </td>
                        <td colspan="1" style="width: 9%"></td>
                    </tr>
                    </thead>
                    <tr>
                        <td style="width: 6%">序号</td>
                        <td colspan="1" style="width: 10%">生产令号</td>
                        <td colspan="2" style="width: 25%">项目名称</td>
                        <td colspan="1" style="width: 20%">图号</td>
                        <td colspan="1" style="width: 10%">零件名称</td>
                        <td colspan="1" style="width: 10%">零件数量</td>
                        <td colspan="1" style="width: 10%">备注</td>
                        <td colspan="1" style="width: 9%"></td>
                    </tr>
                    <tbody id="weightP">
                    <!--<tr >-->
                    <!--<td style="width: 6%" beforeTdOrdernum="beforeTdOrdernum">1</td>-->
                    <!--<td colspan="1">-->
                    <!--<input type="text" class="form-control" name="prodNo" autocomplete="off">-->
                    <!--</td>-->
                    <!--<td colspan="2">-->
                    <!--<input type="text" class="form-control" name="proName" autocomplete="off">-->
                    <!--</td>-->
                    <!--<td colspan="1">-->
                    <!--<input type="text" class="form-control" name="drawNo" autocomplete="off">-->
                    <!--</td>-->
                    <!--<td colspan="1">-->
                    <!--<input type="text" class="form-control" name="drawName" autocomplete="off">-->
                    <!--</td>-->
                    <!--<td colspan="1">-->
                    <!--<input type="text" class="form-control" name="drawNum" autocomplete="off">-->
                    <!--</td>-->
                    <!--<td colspan="1">-->
                    <!--<input type="text" class="form-control" name="comment" autocomplete="off">-->
                    <!--</td>-->
                    <!--<td style=>-->
                    <!--<span class="card-del" title="删除"><i class="fa fa-remove text-red"></i> </span>-->
                    <!--</td>-->
                    <!--</tr>-->
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    let table, table1, table2;

    /** 打开选择出库模态框 */
    function openExplain() {
        // 加载项目说明文件列表
        initTableExplain();
        js.modal.open("modal-import-record");
    }

    /** 文件附件列表 */
    function initTableExplain() {
        // 加载表格
        table = js.table.init({
            url: ctx + "delivery/productDetailList",
            id: "bootstrap-table-explain",
            showExport: false,
            pagination: false,

            columns: [
                {
                    checkbox: true,
                    formatter: function (value, row) {
                        if (row.drawNum == 0) {
                            return {disabled: true}
                        } else {
                            return {disabled: false}
                        }
                    }
                },
                {

                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "生产令号", field: 'prodNo'},
                {title: "项目名称", field: 'proName'},
                {title: "类型", field: 'special'},
                {title: "部分", field: 'part'},
                {title: "零件名称", field: 'drawName'},
                {title: "图号", field: 'drawNo'},
                {title: "数量", field: 'drawNum'},
                // {
                //     title: "发货数量", field: 'num',
                //     formatter: function (value, row, index) {
                //         if (value) {
                //             return '<input type="number" min="0" step="1" max="' + row.drawNum + '"  step="1" id="' + index + '" style="border: none;width: 50px" data-index="' + index + '" onchange="changeReason(this)" value="' + value + '" oninput="myFunction(' + row.drawNum + ',' + index + ')" />'
                //         } else {
                //             return '<input type="number" min="0" step="1" id="reason" max="' + row.drawNum + '" style="border: none;width: 50px;color: red" data-index="' + index + '" onchange="changeReason(this)" value=0 />'
                //
                //         }
                //     }
                // },
                // {
                //     title: "图纸类型", field: 'drawType',
                //     formatter: function (value, row, index) {
                //         if (value == 1) {
                //             return '<span >制作件</span>';
                //         } else {
                //             return '<span >装配件</span>';
                //         }
                //     }
                // },
                // {
                //     title: "来源", field: 'source',
                //     formatter: function (value, row, index) {
                //         if (value == 1) {
                //             return '<span >半成品库</span>';
                //         } else {
                //             return '<span >成品库</span>';
                //         }
                //     }
                // },
                {title: "存放地点", field: 'location'}
            ]
        });
    }

    /** 保存 */
    function saveAll() {
        debugger
        let res = js.vd({
            id: 'sheetForm',
            notEmpty: ['prodNo', 'proCode', 'drawNo', 'drawName', 'drawNum', 'createName'
                , 'createTime']
        })
        if (!res) {
            return;
        }
        var url = ctx + "delivery/saveDelivery";
        js.validSubmit({
            formId: "sheetForm",
            url: url,
            data: new FormData($("#sheetForm")[0]),
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    location.href = ctx + "delivery/submit";
                } else {
                    js.modal.warning(result.msg);
                }
            }
        });
    }

    /** 删除行 */
    $('#sheetForm').on('click', '.card-del', function () {
        if ($("table tbody tr").length > 0) {

            $(this).parents("tr").remove();
        }
        beforeCompuTrNoH();
    });

    /** 添加一行 */
    function addkucun(arr) {
        for (let i = 0; i < arr.length; i++) {
            let b = arr[i].prodNo || '';
            let c = arr[i].proName || '';
            let d = arr[i].drawNo || '';
            let e = arr[i].drawName || '';
            let f = arr[i].drawNum || '';
            let a = arr[i].comment || '';
            $("#weightP").after(`
                    <tr orderNum="orderNum">
                        <td beforeTdOrdernum="beforeTdOrdernum">1</td>
                       <td colspan="1">${b}
                            <input type="hidden" class="form-control" name="asseId" value="${arr[i].id}" autocomplete="off" >
                            <input type="hidden" class="form-control" name="sheetId" value="${arr[i].sheetId}" autocomplete="off" >
                            <input type="hidden" class="form-control" name="prodNo" value="${b}" autocomplete="off" >
                        </td>
                        <td colspan="2">${c}
                            <input type="hidden" class="form-control" name="proName" value="${c}" autocomplete="off" >
                        </td>
                        <td colspan="1">${d}
                            <input type="hidden" class="form-control" name="drawNo" value="${d}" autocomplete="off" >
                        </td>
                        <td colspan="1">${e}
                            <input type="hidden" class="form-control" name="drawName" value="${e}" autocomplete="off" >
                        </td>
                        <td colspan="1">${f}
                            <input type="hidden" class="form-control" name="drawNum" value="${f}" autocomplete="off" >
                        </td>
                        <td colspan="1">${a}
                            <input type="hidden" class="form-control" name="comment" value="${a}" autocomplete="off" hidden>
                        </td>
                        <td style=>
                            <span class="card-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
            `);
            beforeCompuTrNoH();
        }
    };

    /** tr表格变更后的序号的计算*/
    function beforeCompuTrNoH() {
        $("table  tr[orderNum='orderNum']").each(function (i, e) {
            $(this).children("td[beforeTdOrdernum='beforeTdOrdernum']").text(i + 1);
        })
    }

    /** 选择计划 */
    function selected() {
        debugger
        let arr1;
        let arr = js.table.selectRows("bootstrap-table-explain");
        if (arr.length < 1) {
            js.modal.alert("请最少选择一条要发货的单据");
            return;
        }
        addkucun(arr);
        js.modal.hide("modal-import-record");
    }

    $(function () {

    });

</script>
</body>
</html>